<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head"></head>
<script type="text/javascript" th:src="@{/static/js/axios.js}"></script>
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<body class="gray-bg">
<form id="ec" th:action="@{/admin}" method="post">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <table class="table form-table margin-bottom10">
                            <tr>
                                <td>
                                    <input type="text" name="username" th:value="${#maps.containsKey(filters, 'username')} ? ${filters.username} : ''" placeholder="用户名" class="input-sm form-control"/>
                                </td>
                                <td>
                                    <input type="text" name="name" th:value="${#maps.containsKey(filters, 'name')} ? ${filters.name} : ''" placeholder="用户姓名" class="input-sm form-control"/>
                                </td>
                                <td>
                                    <input type="text" name="phone" th:value="${#maps.containsKey(filters,'phone')}?${filters.phone}:''" placeholder="手机号码" class="input-sm form-control"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" name="createTimeBegin" th:value="${#maps.containsKey(filters,'createTimeBegin')}?${filters.createTimeBegin}:''" placeholder="开始日期：YYYY-MM-DD" class="input-sm form-control" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})"/>
                                </td>
                                <td>
                                    <input type="text" name="createTimeEnd" th:value="${#maps.containsKey(filters,'createTimeEnd')}?${filters.createTimeEnd}:''" placeholder="截止日期：YYYY-MM-DD" class="input-sm form-control" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})"/>
                                </td>
                                <td>
                                </td>
                            </tr>
                        </table>
                        <div>
                            <button type="button" class="btn btn-sm btn-primary" onclick="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">搜索</button>
                            <button type="button" class="btn btn-sm btn-primary create">新增</button>
                            <button type="button" id="loading-example-btn" onclick="javascript:window.location.reload();" class="btn btn-white btn-sm">刷新</button>
                        </div>
                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                            <tr class="text-center">
                                <th>序号</th>
                                <th>头像</th>
                                <th>用户姓名</th>
                                <th>用户账号</th>
                                <th>手机号</th>
                                <th>角色</th>
                                <th>创建时间</th>
                                <th>操作 </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="gradeX" th:each="item,itemStat : ${page.list}">

                                <td class="text-center" th:text="${itemStat.count}">1</td>
                                <td>
                                    <img th:src="${item.headUrl}" style="width: 60px; height: 60px;">
                                </td>
                                <td th:text="${item.username}">王倩倩</td>
                                <td th:text="${item.name}">wqq</td>
                                <td th:text="${item.phone}">15010546381</td>
                                <td >
                                    <!--<span th:each="role,roleStat : ${item.roleList}">{{role.roleName}}</span>-->
                                    <lable>
                                        <p th:each="role,roleStat : ${item.roleList}" th:text="${role.roleName}"></p>
                                    </lable>
                                </td>
                                <td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}">2022-02-08 10:35:38</td>
                                <td class="text-center">
                                    <a class="edit" th:attr="data-id=${item.id}">修改</a>
                                    <a class="delete" th:attr="data-id=${item.id}">删除</a>
                                    <a class="upload" th:attr="data-id=${item.id}">上传头像</a>
                                    <a class="assign" th:attr="data-id=${item.id}">分配角色</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="row" th:include="common/pagination :: pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
</body>
<script>
    
    // 使用jquery开发 window.onload = $(function() {}),页面加载完成之后,再调用
    $(function () {
        $(".create").on("click", function () {
            opt.openWin("[[@{/admin/create}]]","新增",580,430);
        });
        // $(".edit").on("click", function () {
        //     var id = $(this).attr("data-id");
        //     opt.openWin('/role/toEdit/' + id,'修改',580,460);
        // });
        $(".edit").click(function () {
            var id = $(this).attr("data-id");
            opt.openWin('/admin/toEdit/' + id,'修改',580,460);
        });
        $(".delete").click(function () {
            var id = $(this).attr("data-id");
            opt.confirm('/admin/delete/'+id,'您确认要删除该角色吗?');
        });
        $(".upload").click(function () {
            var id = $(this).attr("data-id");
            opt.openWin('/admin/uploadShow/'+id,'上传头像',580,300);
        });
        //分配角色
        $(".assign").click(function () {
            var id = $(this).attr("data-id");
            opt.openWin('/admin/assignShow/'+id, '分配角色', 550, 450);
        });
     })
</script>
</html>